<!DOCTYPE html>
<html>
<head>
<title>Physics Diagram</title>
</head>
<body>

<canvas id="myCanvas" width="800" height="400"></canvas>

<script>
    const canvas = document.getElementById("myCanvas");
    const ctx = canvas.getContext("2d");

    // Clear canvas
    ctx.fillStyle = "white";
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    
    // General styles for drawing
    ctx.lineWidth = 2;
    ctx.strokeStyle = 'black';
    ctx.fillStyle = 'black';

    // 1. Draw the spacecraft (cylinder)
    const sc_cy = 175;  // center y
    const sc_r = 40;    // radius
    const sc_x1 = 100; // back center x
    const sc_x2 = 300; // front center x

    ctx.beginPath();
    // Use a single continuous path for the outline
    ctx.arc(sc_x1, sc_cy, sc_r, Math.PI / 2, Math.PI * 3 / 2); // Back arc
    ctx.lineTo(sc_x2, sc_cy - sc_r); // Top line
    ctx.arc(sc_x2, sc_cy, sc_r, -Math.PI / 2, Math.PI / 2); // Front arc
    ctx.lineTo(sc_x1, sc_cy + sc_r); // Bottom line
    // The path is closed implicitly by the first arc command, so stroke() is enough.
    ctx.stroke();

    // 2. Draw the velocity vector
    const arrowStartX = sc_x2 + 25;
    const arrowEndX = arrowStartX + 120;
    const arrowY = sc_cy;

    // Arrow shaft
    ctx.beginPath();
    ctx.moveTo(arrowStartX, arrowY);
    ctx.lineTo(arrowEndX, arrowY);
    ctx.stroke();

    // Arrow head
    ctx.beginPath();
    ctx.moveTo(arrowEndX, arrowY);
    ctx.lineTo(arrowEndX - 12, arrowY - 6);
    ctx.moveTo(arrowEndX, arrowY);
    ctx.lineTo(arrowEndX - 12, arrowY + 6);
    ctx.stroke();

    // Velocity label (ν₀)
    ctx.font = "italic 24px Times New Roman";
    ctx.fillText("\u03BD", arrowStartX + 45, arrowY - 10); // Greek letter nu
    ctx.font = "16px Times New Roman";
    ctx.fillText("0", arrowStartX + 60, arrowY - 5);

    // 3. Draw the dust cloud
    const cloudX = arrowEndX + 50;
    const cloudY = sc_cy - 80;
    const cloudWidth = 280;
    const cloudHeight = 160;
    const numDots = 400;

    for (let i = 0; i < numDots; i++) {
        const x = cloudX + Math.random() * cloudWidth;
        const y = cloudY + Math.random() * cloudHeight;
        ctx.beginPath();
        // Draw a small, slightly elongated, filled dot with a slight random tilt
        ctx.ellipse(x, y, 1.2, 2.0, Math.random() * 0.5 - 0.25, 0, 2 * Math.PI);
        ctx.fill();
    }

    // 4. Draw the figure label
    ctx.font = "bold 20px Times New Roman";
    ctx.textAlign = "center";
    ctx.fillText("Fig. 1.108.", canvas.width / 2, 350);

</script>

</body>
</html>